<template>
  <div class="app-container">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="发放积分类型：" prop="">
          <el-select v-model="queryParams.assetType" placeholder="请选择" clearable :style="{width: inputWidth}" @change="handleassetType">
            <el-option v-for="dict in assetTypeLs" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="发放状态：" prop="">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable :style="{width: inputWidth}">
            <el-option v-for="dict in statusLs" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请发放账户：" prop="">
          <el-select v-model="queryParams.platformWalletType" placeholder="请选择" clearable :style="{width: inputWidth}">
            <el-option v-for="dict in platformWalletTypeList" :key="dict.id" :label="dict.value" :value="dict.id"  />
          </el-select>
        </el-form-item>
        <el-form-item label="发放时间：" prop="">
          <el-date-picker v-model="date" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
            type="datetimerange" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" style="width: 380px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" size="small" @click="addView">申请积分运营</el-button>
        <export-excel-button title="运营积分发放列表" :size="'small'" action="/platform/asset/apply/export"
          :params="ExportParams" />
      </div>
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="发放积分类型" align="center" prop="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="assetTypeLs" :value="scope.row.assetType" />
          </template>
        </el-table-column>
        <el-table-column label="申请发放账户" align="center" prop="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag v-if="scope.row.assetType == 1" :options="platformWalletTypeLs" :value="scope.row.platformWalletType" />
            <dict-tag v-if="scope.row.assetType == 2" :options="platformWalletTypeLsNew" :value="scope.row.platformWalletType" />
          </template>
        </el-table-column>
        <el-table-column label="申请数量" align="center" prop="applyAmount" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="已经发放数量" align="center" prop="used" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="剩余发放数量" align="center" prop="usable" :show-overflow-tooltip="true" />
        <el-table-column label="计划发放时间" align="center" prop="issueTime" :show-overflow-tooltip="true" />
        <el-table-column label="申请人" align="center" prop="applyName" :show-overflow-tooltip="true" />
        <el-table-column label="发放状态" align="center" prop="time" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="statusLs" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="issuePointsView(scope.row)" v-if="scope.row.status==2">发放积分
            </el-button>
            <el-button size="mini" type="text" @click="distributionDetail(scope.row)"
              v-if="scope.row.status==2||scope.row.status==4">发放明细</el-button>
            <el-button size="mini" type="text" @click="reasonView(scope.row)" v-if="scope.row.status==3">驳回原因
            </el-button>
            <el-button size="mini" type="text" @click="deleteClick(scope.row)" v-if="scope.row.status==3">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 申请积分运营弹窗 -->
    <Dialog ref="dialog" @refresh="getList"></Dialog>
    <!-- 发放积分弹窗 -->
    <DialogIssuePoints ref="dialogIssuePoints" @refresh="getList"></DialogIssuePoints>
    <!-- 发放明细弹窗 -->
    <DialogDistributionDetail ref="dialogDistributionDetail" @refresh="getList"></DialogDistributionDetail>
    <!-- 驳回原因 -->
    <el-dialog title="驳回原因" :visible.sync="dialogVisible" width="500px">
      <span>{{rejectCause}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    assetApplyLs,
    deleteAssetApply
  } from "@/api/integralOperation";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import Dialog from "@/views/integralOperation/distributionPoints/dialog";
  import DialogIssuePoints from "@/views/integralOperation/distributionPoints/dialogIssuePoints";
  import DialogDistributionDetail from "@/views/integralOperation/distributionPoints/dialogDistributionDetail";
  export default {
    // dicts: ['equity_card_issue_type', 'equity_card_sell_status'],
    name: "",
    components: {
      ExportExcelButton,
      Dialog,
      DialogIssuePoints,
      DialogDistributionDetail
    },
    data() {
      return {
        //日期
        date: [],
        labelWidth: '120px',
        inputWidth: '220px',
        dialogVisible: false,
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 表格数据
        tabList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          assetType: '', //发放积分类型 platform_apply_asset_type
          platformWalletType: '', //申请发放账户 神椰coco为platform_coco_wallet_type
          status: '', //发放状态 platform_apply_status
          startIssueTime: '', //计划发放开始时间
          endIssueTime: '', //计划发放结束时间
        },
        assetTypeLs: [], //发放积分类型下拉
        statusLs: [], //状态下拉
        platformWalletTypeLs: [], //发放账户下拉
        platformWalletTypeLsNew: [],
        rejectCause: '', //拒绝原因
        platformWalletTypeList: [],
        insType: ''
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getAssetType();
      this.getDictStatus();
      this.getPlatformWalletType();
      this.getList();
    },
    methods: {
      //获取发放积分类型字典
      getAssetType() {
        var dictType = "platform_apply_asset_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.assetTypeLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取状态字典
      getDictStatus() {
        var dictType = "platform_apply_status";
        this.$getSelectList(dictType)
          .then((res) => {
            this.statusLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取申请发放账户字典
      getPlatformWalletType() {
        var dictType = "platform_coco_wallet_type,platform_tf_wallet_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.platformWalletTypeLs = res.result[0].dictList;
            this.platformWalletTypeLsNew = res.result[1].dictList
          })
          .finally(() => {
            this.loading = false;
          });
      },
      handleassetType(e){
        console.log('e',e)
        if(e == 1){
          this.platformWalletTypeList = this.platformWalletTypeLs    
        }else if(e == 2){
          this.platformWalletTypeList = this.platformWalletTypeLsNew
        }
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        assetApplyLs(this.queryParams).then(response => {
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.date = []
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          assetType: '', //发放积分类型 platform_apply_asset_type
          platformWalletType: '', //申请发放账户 神椰coco为platform_coco_wallet_type
          status: '', //发放状态 platform_apply_status
          startIssueTime: '', //计划发放开始时间
          endIssueTime: '', //计划发放结束时间
        }
        // this.resetForm("form");
        this.handleQuery()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.startIssueTime = this.date[0];
        this.queryParams.endIssueTime = this.date[1];
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.reset();
      },
      /** 申请积分运营 */
      addView() {
        this.$refs.dialog.open(null);
      },
      /** 发放积分 */
      issuePointsView(row) {
        
        this.$refs.dialogIssuePoints.open(row.id,row.assetType);
      },
      /** 发放明细 */
      distributionDetail(row) {
        this.$refs.dialogDistributionDetail.open(row.id,row.assetType);
      },
      /** 驳回原因 */
      reasonView(row) {
        this.rejectCause = row.rejectCause
        this.dialogVisible = true
      },
      /** 删除 */
      deleteClick(row) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAssetApply(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          });
        }).catch(() => {});
      },
    }
  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
  }

</style>
